<template>
  <view class="search">
    <view class="input">
      <uni-icons type="search" size="18" style="margin-right: 10rpx;"></uni-icons>搜索
    </view>
  </view>
</template>

<script>
  export default {
    name: "my-search",
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  .search {
    background-color: #55aaff;
    text-align: center;
    width: 100%;
    height: 100rpx;

    .input {
      line-height: 80rpx;
      margin-left: 50rpx;
      width: 87%;
      height: 80rpx;
      background-color: white;
      position: relative;

      &::before {
        content: ' ';
        display: block;
        width: 80rpx;
        height: 80rpx;
        background-color: white;
        border-radius: 50%;
        position: absolute;
        left: -30rpx;
      }

      &::after {
        content: ' ';
        display: block;
        width: 80rpx;
        height: 80rpx;
        background-color: white;
        border-radius: 50%;
        position: absolute;
        top: 0;
        right: -30rpx;
      }
    }
  }
</style>